@import 'util.scss';
html {
    padding: 0;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    background-color: #0c4872;
    background-image: url(./image/background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.title {
    font-size: vw(25);
    font-weight: bold;
    color: white;
    text-align: center;
}

.header {
    display: flex;
    justify-content: space-between;
}

#right {
    border: 1px solid;
    border-image-source: linear-gradient(180deg, #4192D9 0%, rgba(65, 146, 217, 0.3) 34.05%, rgba(65, 146, 217, 0.3) 68.61%, #4192D9 100%);
}

#leftOne,
#leftTwo,
#leftThree,
#rightOne,
#rightTwo,
#rightThree {
    width: vw(500);
    height: vh(300);
    font-size: vh(16);
    // border: vh(2) solid red;
    background-image: url(./image/itemBackGround.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    margin: vh(30) 0;
}

#main {
    width: calc(100% - vw(1000));
}

#mainOne {
    height: vh(632);
    font-size: vh(16);
    margin: vh(30) 0;
}

#mainTwo {
    height: vh(300);
    font-size: vh(16);
    background-image: url(./image/mainTwo.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    margin: vh(30) 0;
}